<template>
  <div class="icon-demo">
    <h3 class="title">基本</h3>
    <div class="page-item">
      <d-row :space="20">
        <d-col :width="4" v-for="(item, index) in iconList" :key="'d-icon' + index">
          <div class="icon-card">
            <div class="icon-box">
              <i :class="item"></i>
            </div>
            <p class="icon-text text-ellipsis">{{ item }}</p>
          </div>
        </d-col>
      </d-row>
    </div>
  </div>
</template>

<script>
const iconList = [
  'd-icon-info',
  'd-icon-warn',
  'd-icon-success',
  'd-icon-error',
  'd-icon-close',
  'd-icon-down',
  'd-icon-left',
  'd-icon-top',
  'd-icon-right',
  'd-icon-inbox',
  'd-icon-outbox',
  'd-icon-plus',
  'd-icon-minus',
  'd-icon-check',
  'd-icon-loading',
  'd-icon-spinner',
  'd-icon-completed',
  'd-icon-refresh',
  'd-icon-home',
  'd-icon-user',
  'd-icon-users',
  'd-icon-task',
  'd-icon-message',
  'd-icon-fullscreen',
  'd-icon-menu',
  'd-icon-link',
  'd-icon-edit',
  'd-icon-trash',
  'd-icon-complete',
  'd-icon-bell',
  'd-icon-search',
  'd-icon-star',
  'd-icon-star-on',
  'd-icon-setting',
  'd-icon-calendar',
  'd-icon-upload',
  'd-icon-github',
  'd-icon-location',
  'd-icon-help'
]

export default {
  name: 'iconDemo',
  data () {
    return {
      iconList
    }
  }
}
</script>

<style lang="stylus" scoped>
.icon-demo
  .page-item
    margin-top 20px
  .icon-card
    padding 25px 10px 30px
    font-size 14px
    border 1px solid $gray2-color
    border-radius 4px
    text-align center
    .icon-box
      font-size 28px
    .icon-text
      margin 10px 0 0
</style>
